// 获取canvas元素，并取得2D绘图上下文
const ctx = document.getElementById('canvas').getContext('2d');
// 设置初始填充颜色为黑色
ctx.fillStyle = 'black';
// 绘制第一个矩形（黑色），位置在(10, 10)，大小50x50像素
ctx.fillRect(10, 10, 50, 50);
ctx.strokeRect(0, 0, 100, 100);
ctx.stroke();
// 保存当前绘图上下文状态到栈中。在这里保存的状态是：黑色填充色，没有进行过平移或旋转变换。
ctx.save();

// 改变填充颜色为红色
ctx.fillStyle = 'red';
// 移动坐标系原点至(100, 100)。这意味着接下来绘制的图形将会相对于这个新的原点定位。
ctx.translate(100, 100);
// 旋转画布45度（π/4弧度）,默认旋转方向是顺时针。从现在开始，任何新绘制的内容都会按照这个角度旋转。
ctx.rotate(Math.PI / 4);

// 绘制第二个矩形（红色），注意坐标已经根据新的坐标系计算。
// 因为进行了平移和旋转，所以这个矩形实际上会出现在不同的位置，并且是倾斜的。
ctx.fillRect(0, 0, 100, 50);

// 恢复之前的状态。这将取消之前的平移和旋转，并恢复fillStyle为黑色。
// 现在的状态与调用ctx.save()时相同。
ctx.restore();

// 使用恢复后的状态（即黑色填充色）继续绘制第三个矩形。
// 这个矩形不会受到之前平移和旋转的影响，因为它是在恢复默认状态后绘制的。
ctx.fillRect(130, 10, 50, 50);
